// 批量调整库存
<template>
  <div class="stock">
    <div class="header">
      <span class="label">商品种类：</span>
      <span>{{ quotationData.categoryName }}</span>
    </div>
    <c-table
      :data="tableData"
      :columns="columns"
      key="id"
      :showHeader="false"
      size="small"
      selection
      :selectedRowKeys="selectedKeys"
      @onSelectChange="onSelectChange"
    >
      <template v-slot:amountUsed="{ row }">
        {{ countAmountUsed(row.amountTotal, row.amountAvailable) }}
      </template>
      <template v-slot:amount="{ row }">
        <a-input-number v-model="row.amount"></a-input-number>
      </template>
    </c-table>
    <div class="footer flex flex-align-c">
      <span class="label">批量增加库存（减库存写负数）：</span>
      <span>
        <a-input-number
          v-model="batchAmount"
          :disabled="selectedKeys.length === 0"
          @change="batchAmountChange"
        ></a-input-number>
      </span>
    </div>
  </div>
</template>

<script>
import quotationDict from "@/dict/quotation";
import { getMyQuotationDetail, updatequotationamount } from "@/api/quotation";

const columns = [
  {
    title: "品牌",
    dataIndex: "brand"
  },
  {
    title: "规格",
    dataIndex: "spec"
  },
  {
    title: "材质",
    dataIndex: "material"
  },
  {
    title: "其他",
    dataIndex: "other"
  },
  {
    title: "仓库简称",
    dataIndex: "warehouseName"
  },
  {
    title: "已用库存",
    scopedSlots: { customRender: "amountUsed" }
  },
  {
    title: "剩余库存",
    dataIndex: "amountAvailable"
  },
  {
    title: "增加库存(减库存写负数)",
    scopedSlots: { customRender: "amount" }
  }
];

export default {
  props: {
    // 报价id，用于查询子商品
    quotationData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      columns,
      tableData: [],
      batchAmount: undefined, // 批量调整库存数
      selectedKeys: [] // 已勾选的商品
    };
  },
  computed: {
    // 计算已用库存
    countAmountUsed() {
      return (total, residue) => {
        let res = Number(total) - Number(residue);
        return res;
      };
    }
  },
  methods: {
    // 重置状态
    resetData() {
      this.selectedKeys = [];
      this.batchAmount = undefined;
    },
    // 获取子商品
    getQuotationDetail() {
      getMyQuotationDetail({
        quotationId: this.quotationData.id
      }).then(res => {
        this.tableData = res.quotationDetailList;
      });
    },
    onSelectChange(rowKeys) {
      this.selectedKeys = rowKeys;
      if (rowKeys.length === 0) this.batchAmount = undefined;
    },
    batchAmountChange(val) {
      this.tableData.forEach((item, idx) => {
        if (this.selectedKeys.indexOf(item.id) !== -1) {
          this.$set(this.$data.tableData[idx], "amount", val);
        }
      });
    },
    // 提交调整库存
    submit() {
      let quotationDetails = this.tableData.map(item => {
        return Object.assign(
          {},
          { id: item.id, amount: item.amount || 0, version: item.version }
        );
      });
      updatequotationamount({
        quotationId: this.quotationData.id,
        version: this.quotationData.version,
        quotationDetails: quotationDetails
      }).then(res => {
        let msg =
          res.quotationType === quotationDict.status.pending.value
            ? "提交成功，等待审核"
            : "操作成功";
        this.resetData();
        this.$message.success(msg);
        this.$emit("success", this.quotationData.id);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.c-table {
  margin: 18px 0;
}
</style>
